<template>
  <div class="reward">
    <mt-header title="有效数据">
      <router-link to="/user-cumulation" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="reward-info">
      <mt-navbar v-model="selected" style="padding-bottom: .2rem">
        <mt-tab-item id="0">个人佣金</mt-tab-item>
        <mt-tab-item id="1">团队明细</mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="0">
          <table class="reward-table">
            <tr>
              <th>订单号</th>
              <th>下单时间</th>
              <th>状态</th>
              <th>佣金</th>
            </tr>
            <router-link :to="{path:'/my-yxitem', query:{'id': item.id}}" tag="tr" v-for="(item, index) of orderArray" :key="index">
                <td class="border-bottom">{{item.sn}}</td>
                <td class="border-bottom">{{item.createDate}}</td>
                <td class="border-bottom">{{item.status===false?"未到账":"已到账"}}</td>
                <td class="border-bottom">￥{{item.money}}</td>
            </router-link>
          </table>
        </mt-tab-container-item>
        <mt-tab-container-item id="1">
          <table class="reward-table">
            <tr>
              <th>订单号</th>
              <th>下单时间</th>
              <th>状态</th>
              <th>金额</th>
            </tr>
            <router-link :to="{path:'/my-yxitem', query:{'id': item.id}}" tag="tr" v-for="(item, index) of orderArray" :key="index">
              <td class="border-bottom">{{item.sn}}</td>
              <td class="border-bottom">{{item.createDate}}</td>
              <td class="border-bottom">{{item.status===false?"未到账":"已到账"}}</td>
              <td class="border-bottom">￥{{item.money}}</td>
            </router-link>
          </table>
        </mt-tab-container-item>
      </mt-tab-container>
      <div v-show="!orderArray" class="not-reward">---没有更多的数据---</div>
    </div>
  <public-menu></public-menu>
  </div>
</template>

<script>
import axios from 'axios'
import PublicMenu from '../public/Menu'
export default {
  name: 'Youxiao',
  data () {
    return {
      orderArray: [],
      selected: '0'
    }
  },
  components: {
    PublicMenu
  },
  methods: {
    getInfo () {
      axios.get('/meimai/interface/member/getMoreEffectiveData', {
        params: {
          'memberId': this.$store.state.userId,
          'type': this.selected
        }
      }).then((res) => {
        let datas = res.data
        // console.log(datas)
        if (datas.code === 0 && datas.array) {
          this.orderArray = datas.array
        }
      })
    }
  },
  watch: {
    selected () {
      this.getInfo()
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
@import '~styles/varibles.styl'
.mint-navbar .mint-tab-item.is-selected
  color: #ec2935
.mint-tab-item
  color: #ccc
.mint-navbar .mint-tab-item.is-selected
  border-bottom: 3px solid #ec2935;
.mint-header
  background: #ec2935
.reward-info
  position: absolute
  top: .8rem
  bottom: .98rem
  width: 100%
  background: $eee
  .reward-table
    width: 100%
    text-align: center
    background: #fff
    th
      background: #fff
      padding: .3rem 0
    td
      padding: .36rem 0
  .not-reward
    text-align: center
    color: $cologray
    margin-top: .3rem
</style>
